<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="UTF-8">
		<meta name="keywords" content="html5,css3,javascript,音乐,音乐播放器,audio,96php.cn,96程序员">
		<meta name="description" content="一个96年的php程序员www.96php.cn">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta name="version" content="1.0.0">
		<link rel="stylesheet" href="__PUBLIC__/Home/css/style.css">
		<link rel="stylesheet" href="__PUBLIC__/Home/css/smusic.css" />
		<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__PUBLIC__/Home/layer/layer.js"></script>
		<script src="__PUBLIC__/Home/js/smusic.js"></script>
		<title>96PHPCN音乐电台</title>
		<style type="text/css">
		.testButton{
			color:rgb(55, 146, 239);
			font-size:12px;
			padding-top:11px;
			padding-bottom:11px;
			padding-left:25px;
			padding-right:25px;
			border-width:0px;
			border-color:rgb(197, 229, 145);
			border-style:solid;
			border-radius:7px;
			background-color:rgb(255, 255, 255);
		}
		.testButton:hover {
			color: #ffffff;
			background-color: #78c300;
			border-color: #c5e591;
		</style>
	</head>

	<body>

		<div class="grid-demo-info">
			<h1 class="m-demo-title">96PHPCN音乐电台</h1>
			<p>酷狗音乐接口，支持收费音乐</p>
			<p>
				<form action="{:U('Home/Index/index')}" method="get">
					歌曲名称：<input type="text" name="keywords" value="告白气球">搜索条数(最低10)：<input type="text" value="10" name="pagesize" >
					<input type="submit" class="testButton" value="点击搜索"/>
				</form>
			</p>
		</div>

		<div class="grid-music-container f-usn">
			<div class="m-music-play-wrap">
				<div class="u-cover"></div>
				<div class="m-now-info">
					<h1 class="u-music-title"><strong>标题</strong><small>歌手</small></h1>
					<div class="m-now-controls">
						<div class="u-control u-process">
							<span class="buffer-process"></span>
							<span class="current-process"></span>
						</div>
						<div class="u-control u-time">00:00/00:00</div>
						<div class="u-control u-volume">
							<div class="volume-process" data-volume="0.50">
								<span class="volume-current"></span>
								<span class="volume-bar"></span>
								<span class="volume-event"></span>
							</div>
							<a class="volume-control"></a>
						</div>
					</div>
					<div class="m-play-controls">
						<a class="u-play-btn prev" title="上一曲"></a>
						<a class="u-play-btn ctrl-play play" title="暂停"></a>
						<a class="u-play-btn next" title="下一曲"></a>
						<a id="download" title="点击下载" style="font-size: 12px;" target="_blank" href="">点击下载</a>
						<a class="u-play-btn mode mode-list current" title="列表循环"></a>
						<a class="u-play-btn mode mode-random" title="随机播放"></a>
						<a class="u-play-btn mode mode-single" title="单曲循环"></a>
					</div>
				</div>
			</div>
			<div class="f-cb">&nbsp;</div>
			<div class="m-music-list-wrap"></div>
			<div class="m-music-lyric-wrap" style="width: 560px;margin-top: 316px;">
				<div class="inner">
					<ul class="js-music-lyric-content">
						<li class="eof">暂无歌词...</li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				getList();
			})
			function getList() {
			var index = layer.load(1, {shade: [0.5, '#393D49']});
			var musicList= {$list};
			if(isNull(musicList)){
				new SMusic({
					musicList: musicList,
					autoPlay: true, //是否自动播放
					defaultMode: 1, //默认播放模式，随机
					callback: function(obj) { //返回当前播放歌曲信息
						layer.close(index);	
					}
				});								
			}else{
				layer.close(index);
				layer.alert("没有获取到", {icon: 5});
			}

		}
		/** 
		* 判断是否null 
		* @param data 
		*/
		function isNull(data){ 
		return (data == "" || data == undefined || data == null) ? false: data; 
		}
		</script>
	</body>

</html>